<template>
  <div class="trade">
    <el-card>
      <el-input class="keyword" placeholder="请输入关键字，按回车查找" v-model="q.keyword" size="small" @keyup.enter.native="handleSearch" />
      <el-button type="primary" size="small" @click="handleAdd">交易开单</el-button>
    </el-card>
    <div style="height:10px"></div>
    <el-table :data="tableData" :height="tableHeight">
      <el-table-column prop="createTime" label="交易时间" width="160"></el-table-column>
      <el-table-column prop="tradeNo" label="交易单号" width="120"></el-table-column>
      <el-table-column prop="custName" label="客户名称" width="180"></el-table-column>
      <el-table-column prop="getCustName" label="提货客户名称" width="180"></el-table-column>
      <el-table-column prop="projectName" label="项目名称" width="180"></el-table-column>
      <el-table-column prop="carNo" label="提货车辆" width="100"></el-table-column>
      <el-table-column prop="goodWeight" label="提货重量"></el-table-column>
      <el-table-column prop="prodName" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="unitPrice" label="单价" width="100"></el-table-column>
      <el-table-column prop="receive" label="应收金额" width="100"></el-table-column>
      <!-- <el-table-column prop="received" label="已收金额" width="100"></el-table-column>
      <el-table-column prop="unreceive" label="未收金额" width="100"></el-table-column> -->
      <el-table-column prop="userName" label="计量员"></el-table-column>
      <el-table-column prop="ifSettle" label="是否结算" width="80">
        <template slot-scope="scope">
          {{scope.row.ifSettle === 1 ? '已结算' : '未结算'}}
        </template>
      </el-table-column>
      <el-table-column prop="settleType" label="结算方式" width="80">
        <template slot-scope="scope">
          {{scope.row.settleType === 1 ? '信用' : '现结'}}
        </template>
      </el-table-column>
      <el-table-column width="100" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTradeList, removeTrade } from '@/api/trade'
export default {
  data () {
    return {
      tableData: [],
      q: {
        keyword: ''
      }
    }
  },
  created () {
    this.handleSearch()
  },
  computed: {
    tableHeight () {
      // const pagination = 60
      const condition = 84
      const pagePadding = 40
      const header = 60
      return window.innerHeight - condition - pagePadding - header
    },
  },
  methods: {
    handleAdd () {
      this.$router.push({
        path: '/task',
      })
    },
    handleEdit (row) {
      this.$router.push({
        path: '/task',
        query: {
          id: row.id
        }
      })
    },
    handleSearch () {
      this.queryList()
    },
    handleRemove (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      this.$confirm('确定要删除吗？', '提示').then(async () => {
        await removeTrade(row.id)
        this.handleSearch()
      })
    },
    async queryList () {
      const res = await getTradeList(this.q)
      if (res.code === 200) {
        this.tableData = res.data
      } else {
        this.tableData = []
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.trade {
  height: 100%;
}
</style>